<template>
    <div>
        <div class="level_form">
            <div class="col-sm-4 text-left">
                <button class="btn btn-primary btn-size" @click="createdFirstLevel">创建导航栏</button>
            </div>

            <div class="col-sm-8 text-right">
                <form action="" class="form-inline">
                    <select class="title-select" name="level" id="">
                        <option value="0">全部</option>
                        <option value="1">一级菜单</option>
                        <option value="2">二级菜单</option>
                        <option value="3">三级菜单</option>
                    </select>
                    <input class="level_input" type="text" name="level_name">
                    <input class="level_submit" type="submit" value="查询">
                </form>
            </div>

        </div>
        <!-- 模态框 -->
        <div class="modal fade" id="myModal">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">

                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">{{modalTitle}}</h4>
                        <button type="button" class="close" @click="closeModel('myModal')">&times;</button>
                    </div>

                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        <form class="add-form">
                            <div class="form-group row" style="display: none">
                                <label for="colFormLabelSmID" class="col-md-4 col-form-label text-md-right">ID</label>
                                <div class="col-md-6">
                                    <input type="text" v-model="id" class="form-control" id="colFormLabelSmID"
                                           placeholder="ID">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="colFormLabelSm1" class="col-md-4 col-form-label text-md-right">Name</label>
                                <div class="col-md-6">
                                    <input type="text" v-model="name" class="form-control" id="colFormLabelSm1"
                                           placeholder="Name">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="colFormLabelSm2" class="col-md-4 col-form-label text-md-right">Type</label>
                                <div class="col-md-6">
                                    <select name="Type" v-model="type" id="colFormLabelSm2" class="form-control">
                                        <option value="1">link</option>
                                        <option value="2">button</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="colFormLabelSm3"
                                       class="col-md-4 col-form-label text-md-right">Weight</label>
                                <div class="col-md-6">
                                    <input type="number" v-model="weight" class="form-control" id="colFormLabelSm3"
                                           placeholder="Weight" maxlength="100">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="colFormLabelSm4" class="col-md-4 col-form-label text-md-right">URL</label>
                                <div class="col-md-6">
                                    <input type="text" v-model="url" class="form-control" id="colFormLabelSm4"
                                           placeholder="URL">
                                </div>
                            </div>
                        </form>
                    </div>

                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button id="submit1" class="btn btn-primary" @click="submitFirstLevel" v-if="level===1">
                            提交
                        </button>
                        <button id="submit2" class="btn btn-primary" @click="submitSecondLevel" v-if="level===2">
                            提交
                        </button>
                        <button id="submit3" class="btn btn-primary" @click="submitThirdLevel" v-if="level===3">
                            提交
                        </button>
                        <button type="button" class="btn btn-secondary" @click="closeModel('myModal')">关闭</button>
                    </div>

                </div>
            </div>
        </div>

        <div class="modal fade" id="removeModal">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">

                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">是否删除{{modalTitle}}?</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" @click="submitRemove(id)">确定</button>
                        <button type="button" class="btn btn-secondary" @click="closeModel('removeModal')">关闭</button>
                    </div>

                </div>
            </div>
        </div>

        <div>
            <table class="yg-table">
                <thead>
                <th style="width: 10%; display: none">uid</th>
                <th style="width: 10%; display: none">id</th>
                <th style="width: 10%">权重</th>
                <th style="width: 15%">名称</th>
                <th style="width: 15%">类型</th>
                <th style="width: 15%">URL</th>
                <th style="width: 30%">创建时间</th>
                <th style="width: 15%">操作</th>
                </thead>
                <tbody>
                <tr v-for="level in first_level.data">
                    <td style="display: none">{{level.uid}}</td>
                    <td style="display: none">{{level.id}}</td>
                    <td>{{level.weight}}</td>
                    <td><router-link :to="{path:'/setting/second/'+level.uid}">{{level.name}}</router-link></td>
                    <td v-if="level.level ===1">一级标题</td>
                    <td v-else>无</td>
                    <td v-if="level.url ===''">无</td>
                    <td v-else>{{level.url}}</td>
                    <td>{{level.created_at}}</td>
                    <td>
                        <a href="#" @click="createdSecondLevel(level.uid)">添加</a>
                        <a href="#" @click="editFirstLevel(level.id)">编辑</a>
                        <a href="#" @click="removeFirstLevel(level.id, level.name)">删除</a>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan=6>
                        <nav aria-label="Page navigation example">
                            <ul class="pagination justify-content-end">
                                <li class="page-item" v-bind:class="{disabled: isDisabled}">
                                    <a class="page-link" href="#" tabindex="-1" aria-disabled="true"
                                       @click="previousPage()">上一页</a>
                                </li>
                                <li class="page-item"><input type="text" class="page-input" v-model="skip_page"></li>
                                <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1"
                                                                  aria-disabled="true">/</a></li>
                                <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1"
                                                                  aria-disabled="true">{{first_level.last_page}}</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="#" @click="skip(skip_page)">跳转</a>
                                </li>
                                <li class="page-item" v-bind:class="{disabled: nextDisabled}">
                                    <a class="page-link" href="#" @click="nextPage()">下一页</a>
                                </li>
                            </ul>
                        </nav>
                    </td>
                </tr>

                </tfoot>
            </table>
        </div>
    </div>
</template>

<script>
    import {addFirstLevel, getFirstLevel, skipPage, addSecondLevel, showFirstLevel, RemoveFirstLevel} from "../../../api/api";

    export default {
        name: "Title",
        data() {
            return {
                id: "",
                name: "",
                type: "",
                weight: "",
                url: "",
                uid: "",
                level: 0,
                first_level: {},
                isDisabled: true,
                nextDisabled: false,
                skip_page: "",
                modalTitle: ""
            }
        },
        created() {
            this.getAllFirstLevel();
        },
        methods: {
            getAllFirstLevel: function () {
                getFirstLevel().then((response) => {
                    this.first_level = response.data;
                    this.skip_page = this.first_level.current_page;
                    if (this.first_level.prev_page_url === null) {
                        this.isDisabled = true;
                    } else {
                        this.isDisabled = false;
                    }
                    if (this.first_level.next_page_url === null) {
                        this.nextDisabled = true;
                    } else {
                        this.nextDisabled = false;
                    }
                }).catch(function (error) {
                    $("#submit1").attr("disabled", false);
                    $("#submit2").attr("disabled", false);
                    $("#submit3").attr("disabled", false);
                    console.log(error);
                });
            },
            editFirstLevel: function (id) {
                showFirstLevel(id).then((response) => {
                    let data = response.data;
                    this.removeAllData();
                    this.id = data.id;
                    this.name = data.name;
                    this.type = data.type;
                    this.weight = data.weight;
                    this.url = data.url;
                    this.modalTitle = "编辑一级标题";
                    this.level = 1;
                    $("#myModal").modal('show');
                }).catch(function (error) {
                    console.log(error);
                });
            },

            removeFirstLevel: function (id, name) {
                this.modalTitle = name;
                this.id = id;
                $("#removeModal").modal('show');
            },

            submitRemove: function (id) {
                RemoveFirstLevel(id).then((response)=>{
                    this.getAllFirstLevel();
                    this.closeModel('removeModal');
                }).catch(function (error) {
                    console.log(error);
                });
            },

            closeModel: function (id) {
                $("#"+id).modal('hide');
            },

            createdFirstLevel: function () {
                this.modalTitle = "添加一级标题";
                this.removeAllData();
                this.level = 1;
                $("#myModal").modal('show');
            },

            removeAllData: function () {
                this.name = "";
                this.type = "";
                this.weight = "";
                this.url = "";
                this.uid = "";
                this.level = 0;
            },

            submitFirstLevel: function () {
                $("#submit1").attr("disabled", true);
                let data = {
                    id: this.id,
                    name: this.name,
                    type: this.type,
                    weight: this.weight,
                    url: this.url
                };
                addFirstLevel(data).then((response) => {
                    $("#myModal").modal('hide');
                    $("#submit1").attr("disabled", false);
                    this.getAllFirstLevel();
                }).catch(function (error) {
                    $("#submit1").attr("disabled", false);
                    console.log(error);
                });
            },

            submitSecondLevel: function () {
                $("#submit2").attr("disabled", true);
                let data = {
                    name: this.name,
                    type: this.type,
                    weight: this.weight,
                    url: this.url,
                    first_uid: this.uid,
                    level: this.level
                };
                addSecondLevel(data).then((response) => {
                    $("#myModal").modal('hide');
                    $("#submit2").attr("disabled", false);
                    this.getAllFirstLevel();
                }).catch(function (error) {
                    $("#submit2").attr("disabled", false);
                    console.log(error);
                });
            },
            submitThirdLevel: function () {
                $("#submit3").attr("disabled", true);
                let data = {
                    name: this.name,
                    type: this.type,
                    weight: this.weight,
                    url: this.url
                };
                addFirstLevel(data).then((response) => {
                    $("#myModal").modal('hide');
                    $("#submit3").attr("disabled", false);
                    this.getAllFirstLevel();
                }).catch(function (error) {
                    $("#submit3").attr("disabled", false);
                    console.log(error);
                });
            },

            createdSecondLevel: function (uid) {
                this.modalTitle = "添加二级标题";
                this.removeAllData();
                this.level = 2;
                $("#myModal").modal('show');
                this.uid = uid;
            },
            skip: function (page) {

                skipPage('first', page).then((response) => {
                    this.first_level = response.data;
                    this.skip_page = this.first_level.current_page;
                    if (this.first_level.prev_page_url === null) {
                        this.isDisabled = true;
                    } else {
                        this.isDisabled = false;
                    }
                    if (this.first_level.next_page_url === null) {
                        this.nextDisabled = true;
                    } else {
                        this.nextDisabled = false;
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            previousPage: function () {
                axios.get(this.first_level.prev_page_url).then((response) => {
                    this.first_level = response.data;
                    this.skip_page = this.first_level.current_page;
                    if (this.first_level.prev_page_url === null) {
                        this.isDisabled = true;
                    } else {
                        this.isDisabled = false;
                    }
                    if (this.first_level.next_page_url === null) {
                        this.nextDisabled = true;
                    } else {
                        this.nextDisabled = false;
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            nextPage: function () {
                axios.get(this.first_level.next_page_url).then((response) => {
                    this.first_level = response.data;
                    this.skip_page = this.first_level.current_page;
                    if (this.first_level.prev_page_url === null) {
                        this.isDisabled = true;
                    } else {
                        this.isDisabled = false;
                    }
                    if (this.first_level.next_page_url === null) {
                        this.nextDisabled = true;
                    } else {
                        this.nextDisabled = false;
                    }
                }).catch(function (error) {
                    console.log(error);
                });

            }
        }
    }
</script>

<style scoped>

    .level_input {
        border-radius: 5px;
        outline: none;
        text-indent: 10px;
        border: 1px solid #ccc;
        width: 250px;
        height: 33px;
    }

    .level_submit {
        border-radius: 5px;
        outline: none;
        text-indent: 10px;
        border: 1px solid #ccc;
        width: 60px;
        height: 33px;
        margin-left: 30px;
    }

    .title-select {
        border-radius: 5px;
        text-transform: none;
        outline: none;
        border: 1px solid #ccc;
        height: 33px;
        width: 250px;
        text-align: center;
        margin-right: 30px;
        text-align-last: center;
    }

    th {
        background: #F5F5F5;
        border-top: 1px solid #e6e6e6;
        border-bottom: 1px solid #e6e6e6;
    }

    tr {
        border-bottom: 1px solid #e6e6e6;
    }

    .page-input {
        width: 35px;
        height: 35px;
        margin: 4px;
    }

</style>
